<template>
	<view class="content">
		<!-- 头部 -->
		<Header @change="navChange" />
		<!-- 导航 -->
		<view class="collapse-box" v-if="navExpand">
			<view class="list" v-for="(item, index) in navList" :key="index">
				<view class="item" @click="routerPage(item, '/pages/project/project')">
					<view class="title">{{ item.remark }}</view>
					<up-icon name="arrow-right" color="#ffef0c"></up-icon>
				</view>
			</view>
		</view>
		<!-- 内容部分 -->
		<view>
			<slot></slot>
		</view>
		<!-- 底部 -->
		<Footer />
	</view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';  
import { request } from '@/utils/request.js' 
import Header from '../header/header.vue'
import Footer from '../footer/footer.vue'

let navExpand = ref(false)

const navList = ref([
	// {id: "1", title: "首页", key: "index", path: "/pages/index/index", children: []},
	// {id: "2", title: "名师简介", key: "introduce", path: "", children: [
	// 	{id: "2-1", title: "三十九代传人曾庆亮", path: "/pages/introduce/introduce"},
	// 	{id: "2-2", title: "三十九代传人曾庆光", path: "/pages/introduce/introduce"},
	// ]},
	// {id: "3", title: "经典案例", key: "example", path: "", children: [
	// 	{id: "3-1", title: "居家住宅风水", path: "/pages/example/example"},
	// 	{id: "3-2", title: "商业店铺风水", path: "/pages/example/example"},
	// ]},
	// {id: "4", title: "培训授徒", key: "train", path: "", children: [
	// 	{id: "4-1", title: "2024培训授徒", path: "/pages/train/train"},
	// ]},
	// {id: "5", title: "作品考察", key: "works", path: "", children: [
	// 	{id: "5-1", title: "风水考察", path: "/pages/works/works"},
	// ]},
	// {id: "6", title: "风水知识", path: "", key: "knowledge", children: [
	// 	{id: "6-1", title: "风水知识", path: "/pages/knowledge/knowledge"},
	// 	{id: "6-2", title: "新闻动态", path: "/pages/knowledge/knowledge"},
	// ]},
	// {id: "7", title: "业务项目", path: "", key: "project", children: []},
	// {id: "8", title: "联系我们", key: "contact",  path: "/pages/contact/contact", children: []},
])


const navChange = (isExpand) => {
	navExpand.value = isExpand
}
  
// 定义 change 方法  
const change = (e, item) => {  
	if(!item.children.length){
		uni.navigateTo({
			url: item.path
		})
	}
};  

const routerPage = (item) => {
	console.log(item, 'item')
	if(item.type === 'contact'){
		uni.navigateTo({
			url: "/pages/contact/contact"
		})
		return
	}
	uni.navigateTo({
		url: `/pages/more/more?type=${item.type}&title=${item.remark}`
	})
}

const getData = () => {
	// 暂时对接业务项目的内容
	request({
		url: "/system/dict/data/type/sys_menu_list",
		data: {},
	}).then(res => {
		if(res.data.length){
			res.data.forEach(item => {
				let arr = item.dictValue.split('/')
				item.type = arr[2]
			})
		}
		navList.value = [
			...res.data,
			{
				"createBy": "admin",
				"createTime": "2025-04-21 16:20:32",
				"updateBy": null,
				"updateTime": null,
				"remark": "联系我们",
				"params": {
					"@type": "java.util.HashMap"
				},
				"dictCode": 70,
				"dictSort": 0,
				"dictLabel": "sys_bus_contact_list",
				"dictValue": "pages/contact/contact",
				"dictType": "sys_menu_list",
				"cssClass": null,
				"listClass": null,
				"isDefault": "N",
				"status": "0",
				"default": false,
				"type": 'contact'
			},
		]
	})
}

onMounted(() => {
	getData()
})
</script>

<style lang="scss" scoped>
	.content{
		height: auto;
		padding-bottom: 120rpx;;
	}
	
	.collapse-box{
		background-color: $uni-bg-color;
		transition: all 0.5s ease;
		padding: 20rpx 0;
		
		.item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			color: $uni-text-color-yellow;
		}
		
		.item:active{
			background-color: $uni-bg-color-deep;
		}
	}
		
</style>
